$themes: (
  "": (
    light: (
      --bg-primary: #f5f3ff,
    ),
  ),
  violet: (
    light: (
      --bg-primary: #f5f3ff,
      --bg-secondary: #ede9fe,
      --text-primary: #312e81,
      --text-secondary: #7c3aed,
      --accent-color: #6d28d9,
      --border-color: #ddd6fe,
      --text-hover: #6d28d9,
      --border-hover: #a78bfa,
      --bg-hover: #e0e7ff,
      --shadow-color: rgba(109, 40, 217, 0.15),
      --disabled-color: #c4b5fd,
      --placeholder-color: #a5b4fc,
      --gradient-primary: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%),
      --gradient-secondary: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%),
    ),
    dark: (
      --bg-primary: #312e81,
      --bg-secondary: #4338ca,
      --text-primary: #f5f3ff,
      --text-secondary: #ddd6fe,
      --accent-color: #a78bfa,
      --border-color: #7c3aed,
      --text-hover: #c4b5fd,
      --border-hover: #e0e7ff,
      --bg-hover: #4338ca,
      --shadow-color: rgba(167, 139, 250, 0.2),
      --disabled-color: #8b5cf6,
      --placeholder-color: #a5b4fc,
      --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%),
      --gradient-secondary: linear-gradient(135deg, #c4b5fd 0%, #e0e7ff 100%),
    ),
  ),
);

@each $theme-name, $theme-values in $themes {
  $light: map-get($theme-values, light);
  $dark: map-get($theme-values, dark);
  // 生成亮色主题类
  html[data-theme=#{if($theme-name == "", "light", "light-#{$theme-name}")}] {
    @each $property, $value in $light {
      #{$property}: $value;
    }
  }
  // 生成暗色主题类
  html[data-theme=#{if($theme-name == "", "dark", "dark-#{$theme-name}")}] {
    @each $property, $value in $dark {
      #{$property}: $value;
    }
  }
}
